<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dojox.av.FLVideo</title>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/tests/css/dijitTests.css";
	</style>

    <script>
		passthrough = function(msg){
			//for catching messages from Flash
			if(window.console){
				console.log(msg);
			}
		}
		var djConfig={isDebug:true, parseOnLoad: true, debugAtAllCosts:false};
    </script>
	<script type="text/javascript" src="../../../dojo/dojo.js"></script>
	<script type="text/javascript">
		dojo.require("dojox.av.FLVideo");
		dojo.require("dojo.parser");

		var seeking = false;
		var prgDim, volDim, progressNode, volumeNode, sliderNode, volsliderNode, durNode,timeNode;
		dojo.addOnLoad(function(){

			progressNode = dojo.byId("progress");
			volumeNode = dojo.byId("volume");
			sliderNode = dojo.byId("slider");
			volsliderNode = dojo.byId("volslider");
			durNode = dojo.byId("dur");
			timeNode = dojo.byId("time");

			// crossdomain test:
			//var url = "http://video.bettervideo.com/video/ClubAJAX/Grog.flv";
			var url = "video/Grog.flv";
			w = new dojox.av.FLVideo({initialVolume:.1, mediaUrl:url, autoPlay:true, isDebug:false}, "vid");

			toggle = function(){
				if(w.isPlaying){
					w.pause();
				}else{
					w.play();
				}
			}

			dojo.connect(w, "onMetaData", function(data){
				durNode.value = data.duration;
			});

			dojo.connect(w, "onSwfSized", function(){
				prgDim = dojo.coords(progressNode);
				volDim = dojo.coords(volumeNode);
			});

			dojo.connect(w, "onPosition", function(time){
				setSlider(time);
				timeNode.value = time;
			});

			dojo.connect(w, "onLoad", function(){
				prgDim = dojo.coords(progressNode);
			});
			// progress silder
			var cmove, cup;
			setSlider = function(time){
				if(!seeking){
					var dur = durNode.value;
					var w = dojo.marginBox(progressNode).w - 12; //slider width * 2
					var p = time/dur;
					var x = p*w
					if(x){
						dojo.style(sliderNode, "left", x+"px");
					}

				}
			};



			dragSlider = function(evt){
				var x = evt.clientX - prgDim.x;
				var p = x/prgDim.w;
				w.seek( durNode.value * p );
				dojo.style(sliderNode, "left", x+"px");
			}
			begSeek = function(){
				seeking = true;
				cmove = dojo.connect(dojo.doc, "mousemove", null, "dragSlider");
				cup = dojo.connect(dojo.doc, "mouseup", null, "endSeek");
			}
			endSeek = function(){
				seeking = false;
				if(cmove) dojo.disconnect(cmove);
				if(cup) dojo.disconnect(cup);
			}
			dojo.connect(progressNode, "mousedown", null, "begSeek");

			dojo.setSelectable(progressNode, false);
			dojo.setSelectable(volumeNode, false);


			// volume silder
			var vmove, vup;
			dojo.connect(w, "onLoad", function(){
				volDim = dojo.coords(volumeNode);
				var v = w.volume(); // returns 0 - 1
				dojo.style(volsliderNode, "left", volDim.w*v+"px");
			});

			dragVolume = function(evt){
				var x = evt.clientX - volDim.x;
				if(x<0) x = 0;
				if(x+6>volDim.w) x = volDim.w-6;
				var p = x/volDim.w;
				w.volume(p);
				dojo.style(volsliderNode, "left", x+"px");
			}
			begVolDrag= function(){
				vmove = dojo.connect(dojo.doc, "mousemove", null, "dragVolume");
			}
			endVolDrag = function(){
				if(vmove) dojo.disconnect(vmove);
				if(vup) dojo.disconnect(vup);
			}
			dojo.connect(volumeNode, "mousedown", null, "begVolDrag");
			dojo.connect(dojo.doc, "mouseup", function(){
				endVolDrag();
				endSeek();
			});

		});



	</script>
    <style>
		input{
			width:66px;
		}
		html, body{
			height:100%;
			padding:0;
		}
		#player{
			width:100%;
			height:100%;
			border:0;
		}
		#player td{
			padding:3px;
		}
		#progress, #volume{
			border:#999999 1px solid;
			background:#FFFFFF;
			height:10px;
			margin:5px 0;
			cursor:pointer;
		}
		#slider, #volslider{
			border:#999999 3px solid;
			height:4px;
			margin:0;
			padding:0;
			width:0px;
			position:relative;
		}
	</style>
</head>
<body >


<table id="player">
  <tr>
    <td><h2>dojox.av.FLVideo</h2>
    <p>DojoX Video uses a Deft component to provide the ability to play FLV files. It does not provide any UI controls;
	it is comprised mostly of methods and events so that a UI can be built that controls the player. The following test
	is kept purposely simple and void of any Dijit widgets. Most of the code in the test is to handle layout and the
	sliders. In fact, adding a video is as easy as: <br>
	<em>new dojox.av.FLVideo({mediaUrl:"myVideoPath"}, "myAttachNode");</em>.</p>
    </td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2" style="height:100%;">
    <div id="vid" style="height:100%;"></div>
    </td>
  </tr>
  <tr>
    <td style="text-align:left;"><input id="time" type="text" /></td>
    <td style="text-align:right;"><input id="dur" type="text" /></td>
  </tr>
  <tr>
    <td colspan="2">
        <div id="progress"><div id="slider"></div></div>
    </td>
  </tr>
  <tr>
    <td>
        <button onclick="toggle();">Play/Pause</button>
        <button onclick="w.play('video/Grog.flv');">Play Grog</button>
        <button onclick="w.play('video/OldMan.flv');">Play Old Man</button>
		<button onclick="w.destroy();">Destroy Test</button>
    </td>
    <td style="text-align:right;">
        <div id="volume"><div id="volslider"></div></div>
    </td>
  </tr>
</table>




</body>
</html>
